<!-- 商城  排行榜 -->
<template>
	<view class="content">
		<!-- 小类 ：书荒、书摘、完本-->
		<scroll-view id="tab-bar" :scroll-x="true" :show-scrollbar="false" class="scroll-h">
			<view v-for="(tab,index) in tabBars" :key="index"  class="uni-tab-item" @click="ontabtap">
				<view>
					<uni-icons :color="tab.iconColor" :type="tab.icon" size="20"></uni-icons>
					{{tab.name}}
					<uni-icons color="#d0d0d0" size="12" type="right"></uni-icons>
				</view>
			</view>
		</scroll-view>
		<!-- 排行榜 -->
		<uni-card style="border-radius: 10px;" title="排行榜">
			<template v-slot:title>
				<view style="padding:15px;">
					<view style="float: left;font-weight: 1000;">
						排行榜
						<uni-icons color="#3b3b3b" size="12" type="right"></uni-icons>
					</view>
					<view style="float: right;font-size: 12px;justify-content: center;">
						换一换
						<uni-icons color="#3b3b3b" size="12" type="refreshempty"></uni-icons>
					</view>
				</view>
			</template>
			<!-- 各类榜单 -->
			<scroll-view :scroll-x="true" :show-scrollbar="false" class="ranklist">
				<view v-for="(tab,index) in rankList" :key="index"  :class="rankListTabIndex === index ? 'rank-list-active' : ''" :data-current="index"
					class="ranklist-item" @click="onRankListTab">
					{{tab.name}}
				</view>
			</scroll-view>
			<scroll-view :scroll-x="true" :show-scrollbar="false">
				<uni-grid :column="4" :highlight="true" :showBorder="false" :square="false"
					style="width: 1850rpx;height:820rpx">
					<uni-grid-item v-for="(item, index) in bookRankList" :key="index" :index="index"
						style="width:440rpx;height:200rpx;padding: 5px;">
						<view class="grid-item-box" style="background-color: #fff;">
							<view class="" style="width: 30%;display: inline-block;">
								<img mode="scaleToFill" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/cat-3.png"
									style="width: 100%;height: 200rpx;vertical-align:middle;
									border-radius: 10px;" />
							</view>
							<view class="" style="display: inline-block;width: 7%;padding-left: 2rpx">
								{{index + 1}}
							</view>
							<view class="" style="display: inline-block;width: 61%;padding-left: 3rpx;">
								<view class="" style="font-weight: 900;">
									{{item.title}}
								</view>
								<view class="" style="color: #c3c3c3;font-size: 12rpx;">
									{{(item.heat / 10000 )+ "万热度"}}
								</view>
							</view>

						</view>
					</uni-grid-item>
				</uni-grid>
			</scroll-view>
		</uni-card>
		<!-- 分类排行 -->
		<view class="clazz" style="padding-left: 6px;display: inline-flex;">
			<scroll-view :scroll-x="true" :show-scrollbar="false" class="tag-ranklist"
				style="width: 62%;display: inline-block;background-color: #f6f6f6;">
				<view v-for="(tab,index) in classBar" :key="index" :class="classTabIndex === index ? 'tag-rank-list-active' : ''"
					:data-current="index"
					class="tag-ranklist-item" @click="onclassTab">
					{{tab.name}}
				</view>
			</scroll-view>
			<view style="display: inline-flex;margin-top: 10rpx;text-align: center;
				background-color: #f6f6f6;height: 43px;width: 30rpx;"
				@click="selectClass">
				<uni-icons color="#3b3b3b" size="12" style="display: block;margin-top: 10px" type="down"></uni-icons>
			</view>
			<uni-popup ref="picker" background-color="#fff" border-radius="10px 10px 0 0" type="bottom">
				<view class="" style="height: 900rpx;padding: 20px 10px;">
					分类选择：暂时未做
				</view>
			</uni-popup>
		</view>

		<!-- 各类书籍推荐 -->
		<view>
			<uni-card  v-for="index in 20" :key="index"
				style="width: 43%;margin:0px;display: inline-block;" @click="onClick" >
				<image slot='cover' src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
					style="width: 100%;height:400rpx;border-radius: 7px;"></image>
				<text class="uni-body">天地是万物众生的客舍，光阴是古往今来的过客。死生的差异，就好像梦与醒的不同，纷纭变换，不可究</text>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		name: "recommend",
		data() {
			return {
				tabBars: [{
					icon: "fire-filled",
					iconColor: "#fa8889",
					name: '书荒',
					id: 'shuhaung'
				}, {
					icon: "paperplane-filled",
					iconColor: "#ad98fa",
					name: '书摘',
					id: 'shuzai'
				}, {
					icon: "wallet-filled",
					iconColor: "#fda86d",
					name: '完本',
					id: 'wanben'
				}, {
					icon: "color-filled",
					iconColor: "#bedbf2",
					name: '新书',
					id: 'xinshu'
				}, {
					icon: "eye-filled",
					iconColor: "#04c1fa",
					name: '短篇',
					id: 'duanpian'
				}],
				rankList: [{
					name: '推荐榜',
					id: 'tuijianbang'
				}, {
					name: '巅峰榜',
					id: 'dianfengbang'
				}, {
					name: '完本榜',
					id: 'wanbenbang'
				}, {
					name: '口碑榜',
					id: 'koubeibang'
				}, {
					name: '黑马榜',
					id: 'heimabang'
				}],
				rankListTabIndex: 0,
				bookRankList: [{
					image: "",
					title: "御剑成仙,只有仙侠小说是最好看的",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}, {
					image: "",
					title: "御剑成仙",
					heat: 89600000
				}],
				classBar: [{
					name: "技能专业",
					id: "jineng"
				}, {
					name: "战争军旅",
					id: "zhanzheng"
				}, {
					name: "情商口才",
					id: "qingshang"
				}, {
					name: "基础教程",
					id: "jichu"
				}, {
					name: "都市言情",
					id: "dushi"
				}, {
					name: "成仙玄幻",
					id: "chengxian"
				}],
				classTabIndex: 0
			};
		},
		methods: {
			ontabtap() {
				uni.showToast({
					title: "待做功能",
					icon: "fail"
				})
			},
			onRankListTab(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				if (this.rankListTabIndex === index) {
					return;
				}
				this.rankListTabIndex = index
			},
			onclassTab(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				if (this.classTabIndex === index) {
					return;
				}
				this.classTabIndex = index
			},
			selectClass() {
				this.$refs.picker.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f6f6f6;
	}

	.scroll-h {
		background-color: #f5f5f5;
		white-space: nowrap;
		width: 100%;

		.uni-tab-item {
			border-radius: 5px;
			width: 150rpx;
			height: 40rpx;
			background-color: #ffffff;
			display: inline-flex;
			margin: 20rpx;
			padding: 10px;
		}
	}


	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		font-weight: 400;
		height: 80rpx;
		border-radius: 6px;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #010000;
		font-size: 40rpx;
		font-weight: 700;
	}

	/* 排行榜样式 */
	.ranklist {
		background-color: #ffffff;
		white-space: nowrap;
		width: 100%;
		
		.ranklist-item {
			border-radius: 5px;
			width: 80rpx;
			height: 40rpx;
			background-color: #ffffff;
			display: inline-flex;
			margin: 10rpx 20rpx;
			padding: 5rpx 10rpx;
		}
		.rank-list-active {
			color: #f5f5f5;
			background-color: #f76f2f;
		}

		
	}
	
	.tag-ranklist {
		background-color: #ffffff;
		white-space: nowrap;
		width: 100%;
		
		.tag-ranklist-item {
			border-radius: 5px;
			width: 120rpx;
			height: 40rpx;
			background-color: #ffffff;
			display: inline-flex;
			margin: 10rpx 10rpx;
			padding: 10rpx 20rpx;
		}
		.tag-rank-list-active {
			color: #f5f5f5;
			background-color: #f76f2f;
		}
	
		
	}


	.even-style {
		margin-left: 10px;
	}
</style>